<template>
	<BaseContainer
		class="report-table-wrapper"
		v-loading="loading"
		element-loading-text="加载中..."
		element-loading-background="rgba(255, 255, 255, 0.8)"
	>
		<div class="t-header">
			<div class="article-title">
				<p
					class="text-tip"
					id="no-print"
					v-if="!otherData?.allData"
					@click="handleShowRoll"
					v-show="params"
					:style="{ opacity: 1, '--base-text-bg': '#dc8844af' }"
				>
					<span class="tip-text-new">名单</span>
				</p>
				<span>南京市家庭养老床位运营补贴核算人员统计表</span>
			</div>
			<p class="text-sm">
				（所属月份： <span class="text-underline">{{ model.year }}</span
				>年<span class="text-underline">{{ model.month }}</span> 月）
			</p>
		</div>
		<div class="flex space-between">
			<div style="min-width: 140px">填报单位（盖章）：{{ modelData.reportingUnit }}</div>
			<div>填报时间：{{ modelData.fillingTime }}</div>
		</div>
		<ReportTable :column="dataList" :isDetail="true" :baseModel="baseModel" :model="modelData" @change="handleSave">
			<template v-slot:additional>
				<div class="flex align-center">
					1.另有
					<div>
						<el-input v-if="!isDetail" v-model="modelData.unconditionsNum" style="width: 80px; padding: 0 10px" @change="handleSave" />
						<span v-else>{{ modelData.unconditionsNum || 0 }}</span>
					</div>
					人不符合补贴条件，其中未满 60 周岁
					<div>
						<el-input v-if="!isDetail" v-model="modelData.underYears" style="width: 80px; padding: 0 10px" @change="handleSave" />
						<span v-else>{{ modelData.underYears || 0 }}</span>
					</div>
					人，政府供养
					<div>
						<el-input v-if="!isDetail" v-model="modelData.governmentSupport" style="width: 80px; padding: 0 10px" @change="handleSave" />
						<span v-else>{{ modelData.governmentSupport || 0 }}</span>
					</div>
					人。
				</div>
			</template>
		</ReportTable>
		<div style="display: flex; margin-top: 10px">
			填表人：
			<el-input style="width: 100px" v-if="!isDetail" v-model="modelData.preparer" @blur="handleSave"></el-input>
			<p v-else>{{ modelData.preparer }}</p>
		</div>

		<el-drawer size="65%" append-to-body v-model="drawer" :with-header="false" @close="handleClose">
			<BedStatistics v-if="drawer" :isCondition="isCondition" :nowRowData="model" :actionBtn="false" />
		</el-drawer>
	</BaseContainer>
</template>

<script setup lang="ts">
import ReportTable from '../ReportTable/index.vue'
import apiMod from '@/apiMod'
import BedStatistics from './BedStatistics/index.vue'

const props = defineProps<{
	otherData?: any
	params?: any
	creditCode?: string | number
	editData?: any
	isDetail?: boolean
	caseId?: string | number
	custome?: boolean
	approvalStatus?: string | number
}>()
console.log('查看', props)
const emit = defineEmits(['save'])

const model = ref({
	year: '',
	month: '',
	creditCode: props.creditCode,
})
const baseModel = shallowRef({})
const loading = ref(false)
const modelData: any = ref({})
let preparer = ref('')
const drawer = ref(false)
const isCondition = ref(false)
const handleShowRoll = () => {
	drawer.value = true
}
const handleClose = () => {
	getInitData()
}

const tableColumnConfig = (data?: any) => {
	if (!data) data = {}
	const dataObj = {
		0: {
			label: '介护',
			data: data?.bedServiceObjectSubsidyCareList || [],
		},
		1: {
			label: '介助',
			data: data?.bedServiceObjectSubsidyAssistanceList || [],
		},
	}
	const formateData = (data, title) => {
		const tempData = data.map((item, index) => {
			let mcObj
			if (index == 0) {
				mcObj = {
					m: title,
					bl: 1,
					fs: 16,
					mc: {
						rs: data.length,
						cs: 1,
					},
				}
			}
			const tempObj = [
				{
					m: index + 1,
				},
				mcObj,
				{
					m: item.name,
				},
				{
					m: item.idCard,
				},
				{
					m: item.address,
				},
				{
					m: item.startDate,
				},
				{
					m: item.endDate,
				},
				{
					m: item.folkPhone,
				},
			].filter(Boolean)

			return tempObj
		})
		return tempData
	}

	const baseHeader = [
		{
			m: '序号',
			bl: 1,
			fs: 16,
		},
		{
			m: '护理类别',
			bl: 1,
			fs: 16,
		},
		{
			m: '姓名',
			bl: 1,
			fs: 16,
		},
		{
			m: '身份证号码',
			bl: 1,
			fs: 16,
		},
		{
			m: '家庭地址',
			bl: 1,
			fs: 16,
		},
		{
			m: '家庭养老床',
			smallM: '位起始日期',
			bl: 1,
			fs: 16,
		},
		{
			m: '家庭养老床',
			smallM: '位终止日期',
			bl: 1,
			fs: 16,
		},
		{
			m: '家属电话',
			bl: 1,
			fs: 16,
		},
	]
	return [
		[...baseHeader],
		...formateData(dataObj[0].data, '介护'),
		...formateData(dataObj[1].data, '介助'),
		[
			{
				m: `合计人数：${data.totalNum || ''}人，其中介助${data.mediationAssistanceNum || ''}人，介护${data.careNum || ''}人。`,
				align: 'left',
				mc: {
					rs: 1,
					cs: 10,
				},
			},
		],
		[
			{
				m: '填表说明',
				mc: {
					rs: 3,
					cs: 1,
				},
			},
			{
				m: `1.另有 ${data.unconditionsNum || ''} 人不符合补贴条件，其中未满 60 周岁${data.underYears || ''} 人，政府供养${
					data.governmentSupport || ''
				} 人。`,
				align: 'left',
				prop: 'additional',
				mc: {
					rs: 1,
					cs: 7,
				},
			},
		],
		[
			{
				m: '2.本表只填写符合补贴条件的对象；',
				align: 'left',
				mc: {
					rs: 1,
					cs: 7,
				},
			},
		],
		[
			{
				m: '3.新入住老人需有老人能力评估证明。',
				align: 'left',
				mc: {
					rs: 1,
					cs: 7,
				},
			},
		],
	]
}
const dataList = ref(tableColumnConfig())

const getInitData = async () => {
	const params = props.params || {}
	const query = {
		year: '',
		month: '',
		creditCode: props.creditCode,
		projectId: props.params.subsidyProjectId,
	}
	if (params.belongDate) {
		query.year = params.belongDate.replace('年', '-').replace('月', '').split('-')[0]
		query.month = params.belongDate.replace('年', '-').replace('月', '').split('-')[1]
		model.value.year = query.year
		model.value.month = query.month
	} else {
		return
	}

	try {
		const condition = (props.caseId && props.isDetail) || props.custome || props.approvalStatus == -2
		isCondition.value = condition
		modelData.value = props.editData
		if (!condition) {
			loading.value = true
			const result1 = await apiMod.view_bed_statistics(query).then((res) => res.data || {})
			const reportData = await apiMod.view_serviceObjectBedSubsidyStatistics_result(query).then((res) => res.data)
			loading.value = false
			modelData.value = {
				...reportData,
				underYears: props.editData.underYears || result1.underYears,
				unconditionsNum: props.editData.unconditionsNum || result1.unconditionsNum,
				governmentSupport: props.editData.governmentSupport || result1.governmentSupport,
				preparer: props.editData.preparer || result1.preparer,
			}
			handleSave()
		}
		dataList.value = tableColumnConfig(modelData.value)
	} catch (error) {
		loading.value = false
	}
}
onMounted(() => {
	if (props.params) getInitData()
})

const handleSave = () => {
	emit('save', modelData.value, 'report_1004', props.editData)
}

onUnmounted(() => {})
</script>

<style scoped lang="scss">
.text-underline {
	text-decoration: underline;
	padding: 0 6px;
}
.report-table-wrapper {
	width: 100%;
	margin: 0 auto;
	padding: 10px 30px;
	top: 0;

	.t-header {
		text-align: center;
		font-size: 18px;
		font-weight: bold;
		padding: 15px 0;

		.text-sm {
			font-weight: 400;
			font-size: 16px;
		}
	}
}

.article-title {
	position: relative;
	z-index: 0;
	width: 63%;
	margin: 0 auto;
}

.text-tip {
	--base-text-bg: rgb(56 176 255 / 13%);
	position: absolute;
	width: 100%;
	height: 100%;
	background: var(--base-text-bg);
	padding: 4px;
	z-index: -1;
	&:hover {
		cursor: pointer;
	}
	.tip-text-new {
		position: absolute;
		right: 0;
		top: -10px;
		color: #fff;
		border-radius: 4px;
		padding: 2px;
		width: 40px;
		background-color: #ed6d05;
	}
	.tip-text-detail {
		background-color: #179fe3;
		position: absolute;
		right: 0;
		top: -10px;
		color: #fff;
		border-radius: 4px;
		padding: 2px;
		width: 40px;
	}
}
</style>
